<script setup>
import { ref } from 'vue'
import axios from 'axios'
axios.defaults.withCredentials = true

const message = ref('')
const loading = ref(false)

async function handleSubmit() {
  if (!message.value.trim()) return
  loading.value = true
  try {
    const body = new URLSearchParams({ messageinfo: message.value })
    await axios.post('/message', body, {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
    })
    // 使用 Element Plus 的消息组件（按需全局注入时会生效）
    // 这里采用轻量方式：通过事件触发原生提示，避免全局依赖干扰
    window?.ElMessage?.success?.('提交成功')
    if (!window?.ElMessage) alert('提交成功')
    message.value = ''
  } catch (e) {
    window?.ElMessage?.error?.('提交失败')
    if (!window?.ElMessage) alert('提交失败')
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div id="common-layout">
    <el-container class="page">
      <el-header class="header">
        <div class="brand">Message Wall</div>
        <div class="subtitle">写下你的想法，点击提交即可发布</div>
      </el-header>
      <el-main class="main">
        <el-card class="form-card" shadow="hover">
          <el-form @submit.prevent="handleSubmit" label-position="top">
            <el-form-item label="留言">
              <el-input
                v-model="message"
                type="textarea"
                :rows="4"
                placeholder="请输入内容..."
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
            <div class="actions">
              <el-button
                type="primary"
                :loading="loading"
                :disabled="!message.trim()"
                @click="handleSubmit"
              >
                提交
              </el-button>
            </div>
          </el-form>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
#common-layout {
  width: 100vw;
  height: 100vh;
  background:
    radial-gradient(1000px 600px at 10% 10%, rgba(64, 158, 255, 0.15), transparent),
    radial-gradient(900px 500px at 90% 20%, rgba(103, 194, 58, 0.12), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  padding-top: 48px;
  padding-bottom: 24px;
  text-align: center;
  border: none;
}

.brand {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.subtitle {
  margin-top: 6px;
  color: var(--el-text-color-secondary);
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-card {
  width: min(680px, 92vw);
  border-radius: 14px;
}

.actions {
  display: flex;
  justify-content: flex-end;
}
</style>
